<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Cache-Control" content="no-siteapp"/>
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
        <meta name="description" content="PlaneUI" />
        <meta name="keywords" content="PlaneUI" />
        <title>表格 - PlaneUI 组件示例</title>

        <link rel="icon" type="image/png" href="favicon.png" />
        <link rel="stylesheet" type="text/css" href="../dist/css/planeui.css" />
	</head>
	<body>
        <div class="pui-layout" style="width:96%;">
            <br/>
            <h4>表格 Table</h4>   
            <p><small>兼容情况： 支持 IE8+ （IE7 及以下版本未测试）</small></p><br/>
            <table class="pui-table pui-table-bordered pui-table-text-center pui-table-thead-bg pui-table-interlaced-color box-shadow-bottom pui-table-gradient">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                        <th>Thornton</th>
                    </tr>
                </thead> 
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                        <td>Thornton</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                        <td>Thornton</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td colspan="2">
                            Larry the Bird
                            <table class="pui-table pui-table-text-left pui-table-uninterlaced-color">
                                <tr>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                </tr>
                                <tr>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                </tr>
                                <tr>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                </tr>
                            </table>
                            <table class="pui-table pui-table-unbordered">
                                <tr>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                </tr>
                                <tr>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                </tr>
                                <tr>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                </tr>
                            </table>
                            <table class="pui-table pui-table-border-vertical">
                                <tr>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                </tr>
                                <tr>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                </tr>
                                <tr>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                </tr>
                            </table>
                        </td>
                        <td>@twitter</td>
                        <td>Thornton</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                        <td>Thornton</td>
                    </tr>
                    <tr>
                        <td class="active">5</td>
                        <td class="success">...</td>
                        <td class="warning">...</td>
                        <td class="error">...</td>
                        <td class="info">...</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                        <td>Thornton</td>
                    </tr>
                    <tr class="success">
                        <td>7</td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                        <td>Thornton</td>
                    </tr>
                </tbody>
                <thead>
                    <tr class="info">
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                        <th>Thornton</th>
                    </tr>
                </thead> 
            </table>   
            <h4>紧凑的表格</h4> 
            <table class="pui-table pui-table-bordered pui-table-text-center pui-table-thead-bg pui-table-interlaced-color pui-table-compact box-shadow-bottom pui-table-gradient">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                        <th>Thornton</th>
                    </tr>
                </thead> 
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                        <td>Thornton</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                        <td>Thornton</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td colspan="2">
                            Larry the Bird
                            <table class="pui-table pui-table-text-left pui-table-uninterlaced-color">
                                <tr>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                </tr>
                                <tr>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                </tr>
                                <tr>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                </tr>
                            </table>
                            <table class="pui-table pui-table-unbordered">
                                <tr>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                </tr>
                                <tr>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                </tr>
                                <tr>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                </tr>
                            </table>
                            <table class="pui-table pui-table-border-vertical">
                                <tr>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                </tr>
                                <tr>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                </tr>
                                <tr>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                    <td>嵌套表格A</td>
                                </tr>
                            </table>
                        </td>
                        <td>@twitter</td>
                        <td>Thornton</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                        <td>Thornton</td>
                    </tr>
                    <tr>
                        <td class="active">5</td>
                        <td class="success">...</td>
                        <td class="warning">...</td>
                        <td class="error">...</td>
                        <td class="info">...</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                        <td>Thornton</td>
                    </tr>
                    <tr class="success">
                        <td>7</td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                        <td>Thornton</td>
                    </tr>
                </tbody>
                <thead>
                    <tr class="info">
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                        <th>Thornton</th>
                    </tr>
                </thead> 
            </table>   
        </div>

        <!--[if (gte IE 9) | !(IE)]><!-->
		<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
        <!--<![endif]-->

		<!--[if lt IE 9]>
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="../dist/js/planeui.patch.ie8.js"></script>
        <![endif]-->

		<!--[if lt IE 10]>
        <script type="text/javascript" src="../dist/js/planeui.patch.ie9.js"></script>
        <![endif]-->
		<script type="text/javascript" src="../dist/js/planeui.js"></script>
    </body>
</html>